<template>
  <div class="min-h-screen bg-gray-50 p-8">
    <div class="mx-auto max-w-[1440px] flex gap-8">
      <!-- 左侧视频和音频区域 -->
      <div class="w-[70%]">
        <!-- 视频区域 -->
        <div class="bg-white rounded-lg shadow-sm p-6">
          <div class="relative aspect-video bg-black rounded-lg overflow-hidden mb-4">
            <video
              ref="videoPlayer"
              class="w-full h-full object-contain"
              src="https://ai-public.mastergo.com/ai/img_res/0d09e638b5ace87088d2b74dee1b49c2.jpg"
              controls
            ></video>
          </div>
        </div>

        <!-- 音频播放区 -->
        <div class="mt-6 space-y-4">
          <!-- 人声音频 -->
          <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-lg font-medium mb-4">人声</h3>
            <!-- <div class="h-[100px] bg-blue-50 rounded-lg mb-4"></div> -->
            <audio
              ref="voicePlayer"
              class="w-full"
              controls
              src="https://ai-public.mastergo.com/ai/img_res/d4a7ce2c2a78689d000856ef389f9929.jpg"
            ></audio>
          </div>

          <!-- 背景音乐 -->
          <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-lg font-medium mb-4">背景音乐</h3>
            <!-- <div class="h-[100px] bg-purple-50 rounded-lg mb-4"></div> -->
            <audio
              ref="musicPlayer"
              class="w-full"
              controls
              src="https://ai-public.mastergo.com/ai/img_res/c3d6e4ef098331589d111c39e5bd240d.jpg"
            ></audio>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="w-[30%]">
        <!-- 文本展示区 -->
        <div class="bg-white rounded-lg shadow-sm p-6">
          <h3 class="text-lg font-medium mb-4">提取文本</h3>
          <div class="h-[200px] overflow-y-auto text-gray-600 text-sm leading-relaxed">
            在这个快速发展的人工智能时代，视频处理技术正在经历前所未有的革新。我们的 AI 系统能够精确识别视频中的语音内容，将其转化为高质量的文字记录。同时，先进的音频分离技术可以完美地将人声和背景音乐分开，为创作者提供更多后期制作的可能性。

            这项技术不仅提高了内容创作的效率，还为视频内容的二次创作和利用开辟了新的途径。通过智能算法，我们能够保证转换后的各种格式都保持最佳质量，让创作者能够专注于内容本身，而不必被技术细节所困扰。
          </div>
        </div>
      </div>
    </div>

    <!-- 悬浮导出面板 -->
    <div class="fixed bottom-8 right-8 bg-white/90 backdrop-blur rounded-lg shadow-lg p-6 w-[320px]">
      <div class="space-y-4">
        <!-- 保存文案 -->
        <div>
          <el-checkbox v-model="saveText" @change="handleTextChange">保存文案</el-checkbox>
          <el-select
            v-if="saveText"
            v-model="textFormat"
            placeholder="选择格式"
            class="mt-2 w-full"
          >
            <el-option label="原文" value="original" />
            <el-option label="翻译" value="translation" />
            <el-option label="概要" value="summary" />
          </el-select>
        </div>

        <!-- 保存人声 -->
        <div>
          <el-checkbox v-model="saveVoice" @change="handleVoiceChange">保存人声</el-checkbox>
          <el-select
            v-if="saveVoice"
            v-model="voiceFormat"
            placeholder="选择格式"
            class="mt-2 w-full"
          >
            <el-option label="MP3" value="mp3" />
            <el-option label="WAV" value="wav" />
            <el-option label="AAC" value="aac" />
          </el-select>
        </div>

        <!-- 保存音乐 -->
        <div>
          <el-checkbox v-model="saveMusic" @change="handleMusicChange">保存音乐</el-checkbox>
          <el-select
            v-if="saveMusic"
            v-model="musicFormat"
            placeholder="选择格式"
            class="mt-2 w-full"
          >
            <el-option label="MP3" value="mp3" />
            <el-option label="WAV" value="wav" />
            <el-option label="AAC" value="aac" />
          </el-select>
        </div>

        <!-- 保存视频 -->
        <div>
          <el-checkbox v-model="saveVideo" @change="handleVideoChange">保存视频</el-checkbox>
          <el-select
            v-if="saveVideo"
            v-model="videoFormat"
            placeholder="选择格式"
            class="mt-2 w-full"
          >
            <el-option label="MP4" value="mp4" />
            <el-option label="AVI" value="avi" />
            <el-option label="MOV" value="mov" />
          </el-select>
        </div>

        <el-button
          type="primary"
          class="w-full !rounded-button whitespace-nowrap"
          :disabled="!canSave"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      saveText: false,
      saveVoice: false,
      saveMusic: false,
      saveVideo: false,
      textFormat: '',
      voiceFormat: '',
      musicFormat: '',
      videoFormat: '',
    };
  },
  computed: {
    canSave() {
      return (
        (this.saveText ? !!this.textFormat : true) &&
        (this.saveVoice ? !!this.voiceFormat : true) &&
        (this.saveMusic ? !!this.musicFormat : true) &&
        (this.saveVideo ? !!this.videoFormat : true) &&
        (this.saveText || this.saveVoice || this.saveMusic || this.saveVideo)
      );
    },
  },
  methods: {
    handleTextChange(val) {
      if (!val) this.textFormat = '';
    },
    handleVoiceChange(val) {
      if (!val) this.voiceFormat = '';
    },
    handleMusicChange(val) {
      if (!val) this.musicFormat = '';
    },
    handleVideoChange(val) {
      if (!val) this.videoFormat = '';
    },
    handleSave() {
      // 实现保存逻辑
    },
  },
};
</script>

<style scoped>
audio::-webkit-media-controls-panel {
  background-color: #f8fafc;
}

audio::-webkit-media-controls-timeline {
  background-color: #e2e8f0;
  border-radius: 4px;
  height: 4px;
}

audio::-webkit-media-controls-play-button {
  background-color: #3b82f6;
  border-radius: 50%;
}

.export-panel-enter-active,
.export-panel-leave-active {
  transition: opacity 0.3s ease;
}

.export-panel-enter-from,
.export-panel-leave-to {
  opacity: 0;
}
</style>